/**
 * 学习目标：使用受控组件，实现双向绑定的效果
 * 类似：vue中v-model， :value, @input
 * 用处：收集用户输入的内容
 * 两个关键点：
 *  1. 表单元素的值，由state控制
 *  2. onChange配合setState修改state的值
 */

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

class App extends React.Component {
  state = {
    msg: 'Hello React',
  };
  handleChange = (e) => {
    console.log('e----->', e);
    this.setState({
      msg: e.target.value,
    });
  };
  render() {
    return (
      <div>
        {/* 通过this.state和input关联，那么input就受到state的控制，就成了受控组件 */}
        <input
          type="text"
          value={this.state.msg}
          // React对表单修改做了统一封装，所有改变的方法都叫onChange
          onChange={this.handleChange}
          // onInput真正的原生事件，不推荐使用
        />
      </div>
    );
  }
}

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(<App></App>);
